<template>
<div class="gzh_instruction">
  <img class="gzh_instruction__banner" :src="banner"/>
  <div class="gzh_instruction__gzh_container">
      <div class="gzh_instruction__sub_title liucheng_title">
        流程
        <div class="bg_title"></div>
      </div>

    <div class="gzh_instruction__cdz_pic">
      <div><div class="gzh_instruction__img_container"><img :src="icon1" alt=""></div><div class="chint">选择</div></div>
      <div><div class="gzh_instruction__img_container"><img :src="icon2" alt=""></div><div class="chint">扫码</div></div>
      <div><div class="gzh_instruction__img_container"><img :src="icon3" alt=""></div><div class="chint">充电</div></div>
      <div><div class="gzh_instruction__img_container"><img :src="icon4" alt=""></div><div class="chint">结束</div></div>
    </div>

    <div class="gzh_instruction__sub_title buzhou_title">
      步骤
      <div class="bg_title"></div>
    </div>
      <div class="gzh_instruction__steps">
        <ul>
          <li>1、选择空闲插座插入电动自行车充电器</li>
          <li>2、打开微信扫一扫，扫描插座或箱体左上方的二维码，进行扫码。<span style="color: #D55F53">（注：首次使用，先扫二维码关注物易联公众号绑定手机号）</span></li>
        </ul>
      </div>
    <img class="gzh_instruction__scan_img img_hint" :src="scan" alt="">
    <div class="gzh_instruction__steps">
      <ul>
        <li>3、用微信扫二维码进入下图进行选择插座号和充电时间然后点击底部开始充电</li>
      </ul>
    </div>
    <img class="gzh_instruction__s1_img img_hint" :src="s1" alt="">
    <div class="gzh_instruction__steps">
      <ul>
        <li>3.1、手机网络差或者二维码破坏的情况下，可以点击页面的输入充电编号进行编号充电。电站编号箱体左上角二维码下方</li>
      </ul>
    </div>
    <img class="gzh_instruction__s2_img img_hint" :src="s2" alt="">
    <img class="gzh_instruction__s2_img img_hint" :src="s3" alt="">

    <div class="gzh_instruction__steps">
      <ul>
        <li>4、系统开始充电，同时公众号会推送充电消息</li>
      </ul>
    </div>
    <img class="gzh_instruction__s4_img img_hint" :src="s4" alt="">


    <div class="gzh_instruction__steps">
      <ul>
        <li>5、充电时间到、充电中途插头被拔出、充电功率大于600W、电池已经充满，系统会自动停止充电，同时会推送相对应的消息在公众号</li>
      </ul>
    </div>
    <img class="gzh_instruction__s5_img img_hint" :src="s5" alt="">


    <div class="gzh_instruction__steps">
      <ul>
        <li>6、账户余额不足无法使用充电桩。可在我的账户余额充值里面充值</li>
      </ul>
    </div>
    <img class="gzh_instruction__s6_img img_hint" :src="s6" alt="">

    <div class="gzh_instruction__steps">
      <ul>
        <li>7、卡余额不足无法使用充电桩。可在我的账户充值里面的卡充值进行充值</li>
      </ul>
    </div>
    <img class="gzh_instruction__s7_img img_hint" :src="s7" alt="">


    <div class="gzh_instruction__sub_title liucheng_title">
      温馨提示
      <div class="bg_title"></div>
    </div>

    <div class="gzh_instruction__steps">
      <ul>
        <li>1.为了您的方便，请您充电前仔细阅读使用说明</li>
        <li>2.为了您和他人的安全，请您定期或半年去购车店（电动车服务站）检查及更换充电器和电池</li>
      </ul>
    </div>

  </div>
  <img class="gzh_instruction__footer_img" :src="footer" alt="">
</div>
</template>

<script>
    import banner from "@/assets/image/gzh/banner.jpg";
    import icon1 from "@/assets/image/gzh/icon1.png";
    import icon2 from "@/assets/image/gzh/icon2.png";
    import icon3 from "@/assets/image/gzh/icon3.png";
    import icon4 from "@/assets/image/gzh/icon4.png";
    import scan from "@/assets/image/gzh/scan.jpg";
    import s1 from "@/assets/image/gzh/s1.jpg";
    import s2 from "@/assets/image/gzh/s2.jpg";
    import s3 from "@/assets/image/gzh/s3.jpg";
    import s4 from "@/assets/image/gzh/s4.jpg";
    import s5 from "@/assets/image/gzh/s5.jpg";
    import s6 from "@/assets/image/gzh/s6.jpg";
    import s7 from "@/assets/image/gzh/s7.jpg";
    import footer from "@/assets/image/functions/footer.png";

    export default {
        data() {
            return {
                icon1: icon1,
                icon2: icon2,
                icon3: icon3,
                icon4: icon4,
                banner:banner,
                scan:scan,
                s1:s1,
                s2:s2,
                s3:s3,
                s4:s4,
                s5:s5,
                s6:s6,
                s7:s7,
                footer:footer
            };
        },
        methods:{

        },
        mounted() {

        }
    };
</script>
<style scoped>

</style>
